import logo from './logo.svg';
import './App.css';
import React from 'react'
function Button() {
    return <button>我是组件button</button>
}

let a = 0;
function clickfn() {
    a++;
    console.log(a);
}



function App() {
    const [ count, setCount ] = React.useState(0);
    let [bbb, setNewCount] = React.useState(0);
    let [form, setForm] = React.useState({
        name: '张三'
    });

    function clickfn2() {
        bbb = bbb + 100;
        console.log(bbb)
        setNewCount(bbb);
    }

    return (
        /**
         * 注意：
         * 1. 对于对象类型的状态变量，应该始终给set方法一个全新的对象 来进行修改
         */
        <div>
            <button onClick={()=>setCount(count+1)}>{ count }</button>
            <button onClick={()=>clickfn()}>{a}</button>
            <button onClick={()=>clickfn2()}>{ bbb }</button>
            <button onClick={()=>setForm({
                ...form,
                name: '李四'
            })}>{ form.name }</button>
        </div>
    )
}

export default App;
